<template>
<div class="app-container">

    <h2 style="text-align: center;">发布新课程</h2>

    <el-steps :active="2" process-status="wait" align-center style="margin-bottom: 40px;">
        <el-step title="填写课程基本信息" />
        <el-step title="创建课程大纲" />
        <el-step title="最终发布" />
    </el-steps>

    <el-button type="text" @click="addCourseBtn">添加章节</el-button>

    <ul class="chanpterList">
        <li v-for="chapter in chapterNestedList" :key="chapter.id">
            <p>
                {{ chapter.title }}
                <span class="acts">
                    <!-- 课程增删改按钮 -->
                    <el-button type="text" @click="openDialog(chapter.id)">添加课时</el-button>
                    <!-- 编辑和删除功能都是根据 v-for="chapter chapter进行获取  dialog中使用了双向绑定 -->
                    <el-button styte="" type="text" @click="editChapterById(chapter.id)">编辑</el-button>
                    <el-button type="text" @click="deleteChapter(chapter.id)">删除</el-button>
                </span>
            </p>

            <!-- 视频 -->
            <ul class="chanpterList videoList">
                <li v-for="video in chapter.children" :key="video.id">
                    <p>
                        {{ video.title }}
                        <span class="acts">
                            <!-- 小节增删改按钮 -->
                            <el-button type="text" @click="openDialog(video.id)">添加视频</el-button>
                            <!-- 编辑和删除功能都是根据 v-for="chapter chapter进行获取  dialog中使用了双向绑定 -->
                            <el-button styte="" type="text" @click="editVideoById(video.id)">编辑</el-button>
                            <el-button type="text" @click="deleteVideo(video.id)">删除</el-button>
                        </span>
                    </p>
                </li>
            </ul>
        </li>
    </ul>
    <!-- 添加和修改章节表单 -->
    <el-dialog :visible.sync="dialogChapterFormVisible" title="添加章节">
        <el-form :model="chapter" label-width="120px">
            <el-form-item label="章节标题">
                <el-input v-model="chapter.title" />
            </el-form-item>
            <el-form-item label="章节排序">
                <el-input-number v-model="chapter.sort" :min="0" controls-position="right" />
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogChapterFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
        </div>
    </el-dialog>
    <!-- 添加和修改课时表单 -->
    <el-dialog :visible.sync="dialogVideoFormVisible" title="添加课时">
        <el-form :model="video" label-width="120px">
            <el-form-item label="课时标题">
                <el-input v-model="video.title" />
            </el-form-item>
            <el-form-item label="课时排序">
                <el-input-number v-model="video.sort" :min="0" controls-position="right" />
            </el-form-item>
            <el-form-item label="是否免费">
                <el-radio-group v-model="video.free">
                    <el-radio :label="true">免费</el-radio>
                    <el-radio :label="false">默认</el-radio>
                </el-radio-group>
            </el-form-item>
            <!-- 上传视频 -->
            <el-form-item label="上传视频">
                <el-upload :on-success="handleVodUploadSuccess" :on-remove="handleVodRemove" :before-remove="beforeVodRemove" :on-exceed="handleUploadExceed" :file-list="fileList" :action="BASE_API+'/eduvod/video/uploadAliyunVideo'" :limit="1" class="upload-demo">
                    <el-button size="small" type="primary">上传视频</el-button>
                    <el-tooltip placement="right-end">
                        <div slot="content">最大支持1G，<br>
                            支持3GP、ASF、AVI、DAT、DV、FLV、F4V、<br>
                            GIF、M2T、M4V、MJ2、MJPEG、MKV、MOV、MP4、<br>
                            MPE、MPG、MPEG、MTS、OGG、QT、RM、RMVB、<br>
                            SWF、TS、VOB、WMV、WEBM 等视频格式上传</div>
                        <i class="el-icon-question" />
                    </el-tooltip>
                </el-upload>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVideoFormVisible = false">取 消</el-button>
            <el-button :disabled="saveVideoBtnDisabled" type="primary" @click="saveOrUpdateVideo">确 定</el-button>
        </div>
    </el-dialog>
    <el-form label-width="120px">
        <el-form-item>
            <el-button @click="previous">上一步</el-button>
            <el-button :disabled="saveBtnDisabled" type="primary" @click="next">下一步</el-button>
        </el-form-item>
    </el-form>
</div>
</template>

<script>
import chapter from "@/api/edu/chapter"
import video from '@/api/edu/video'
export default {
    data() {
        return {
            saveBtnDisabled: false,
            courseId: '',
            chapter: { // 章节对象
                title: '',
                sort: 0
            },
            video: { // 课时对象
                title: '',
                sort: 0,
                free: 0,
                videoSourceId: '',
                videoOriginalName: ''
            },
            chapterId: '',
            chapterNestedList: [],
            dialogChapterFormVisible: false, //是否显示章节弹窗
            dialogVideoFormVisible: false, // 是否显示小节表单
            fileList: [], //上传文件列表
            BASE_API: process.env.BASE_API // 接口API地址
        }
    },
    created() {
        if (this.$route.params && this.$route.params.id) {
            this.courseId = this.$route.params.id
            console.log(this.courseId)
            this.getChapterVideo()
        }

    },
    methods: {
        //点击弹框的确认按钮执行的方法  移除阿里云视频
        handleVodRemove() {
            //调用后端删除阿里云视频接口
            video.deleteVideoByVideoId(this.video.videoSourceId)
                .then(
                    response => {
                        //提示信息
                        this.$message({
                            type: "success",
                            message: "删除视频成功"
                        });
                        this.fileList = []
                        //删除视频后  需要将video中的视频id和视频名称的值进行清空
                        //上传之后的视频id赋值 
                        this.video.videoSourceId = ''
                        //上传的视频名称赋值
                        this.video.videoOriginalName = ''
                    }
                );
        },
        //移除视频前的操作 弹出确认框 
        beforeVodRemove(file, fileList) {
            return this.$confirm(`确定移除 ${ file.name }？`);
        },
        //上传视频成功调用的方法 
        handleVodUploadSuccess(response, file, fileList) {
            //上传之后的视频id赋值 
            this.video.videoSourceId = response.data.videoId
            //上传的视频名称赋值
            this.video.videoOriginalName = file.name
        },
        //上传视频多于一个
        handleUploadExceed(files, fileList) {
            this.$message.warning('想要重新上传视频，请先删除已上传的视频')
        },
        //=======================================小节方法==========================================
        //删除小节信息
        deleteVideo(videoId) {

            this.$confirm("此操作将永久删除讲小节信息, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                //执行删除小节信息方法
                video.deleteVideoById(videoId).then(response => {
                    this.$message({
                        type: "success",
                        message: "删除小节成功"
                    })
                    this.getChapterVideo()
                })
            });

        },
        //更新小节信息
        updateVideo() {
            video.updateVideo(this.video).then(response => {
                this.dialogVideoFormVisible = false
                this.$message({
                    type: "success",
                    message: "小节信息更新成功"
                })
                this.getChapterVideo()
            })
        },
        //弹出小节信息框 回显小节信息
        editVideoById(videoId) {
            this.dialogVideoFormVisible = true
            video.getVideoById(videoId).then(response => {
                this.video = response.data.eduVideo
            })
        },
        //添加小节
        savaVideo() {
            this.video.courseId = this.courseId
            this.video.chapterId = this.chapterId
            video.addVideo(this.video)
                .then(response => {
                    this.dialogVideoFormVisible = false
                    this.$message({
                        type: "success",
                        message: "添加小节成功"
                    })
                    this.getChapterVideo()
                })
        },
        //添加或更新小节信息
        saveOrUpdateVideo() {
            if (!this.video.id) {
                this.savaVideo()
            } else {
                this.updateVideo()
            }

        },
        //打开添加小节弹窗
        openDialog(chapterId) {
            this.dialogVideoFormVisible = true
            this.chapterId = chapterId
            //每次添加小节需要将内容进行清空
            this.video.title = ''
            this.video.sort = 0
            this.video.free = 0
        },
        //=======================================章节方法==========================================
        //删除章节
        deleteChapter(chapterId) {

            this.$confirm("此操作将永久删除讲课程信息, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                //执行删除讲师信息方法
                chapter.deleteChapterById(chapterId)
                    .then(response => {
                        this.$message({
                            type: "success",
                            message: "删除课程成功"
                        })
                        this.getChapterVideo()
                    })
            });
        },
        //更新章节信息
        updateChapter() {
            chapter.updateChapter(this.chapter)
                .then(response => {
                    this.$message({
                        type: "success",
                        message: "更新章节成功"
                    })
                    this.dialogChapterFormVisible = false
                    this.getChapterVideo()
                })

        },
        //根据id回显章节信息
        editChapterById(chapterId) {
            this.dialogChapterFormVisible = true
            chapter.getChapterById(chapterId)
                .then(response => {
                    this.chapter = response.data.chapter
                })

        },
        //添加课程按钮
        addCourseBtn() {
            this.dialogChapterFormVisible = true
            this.chapter.title = ''
            this.chapter.sort = 0
        },
        //添加章节
        saveChapter() {
            this.chapter.courseId = this.$route.params.id
            chapter.addChapter(this.chapter).then(response => {
                this.dialogChapterFormVisible = false
                //提示添加成功信息
                this.$message({
                    type: "success",
                    message: "添加章节成功"
                })
                //刚刚调用了这个方法 可是页面没有更新  原因是this.courseId:"" 而是了下 是这个原因
                this.getChapterVideo()
            })

        },
        //根据id回显章节信息
        getChapterById() {
            this.dialogChapterFormVisible = true
            chapter.getChapterById(this.chapter.id)
                .then(response => {
                    this.chapter = response.data.chapter
                })
        },
        //保存或更新
        saveOrUpdate() {
            if (!this.chapter.id) {
                this.saveChapter()
            } else {
                this.updateChapter()
            }
        },
        //获取所有的章节信息
        getChapterVideo() {
            chapter.getChapterVideo(this.courseId) //从路由中取到id
                .then(response => {
                    this.chapterNestedList = response.data.allChapterVideo

                })
        },
        previous() {
            this.$router.push({
                path: `/course/info/${this.courseId}`
            })
        },
        next() {
            this.$router.push({
                path: `/course/publish/${this.courseId}`
            })
        }
    }
}
</script>

<style scoped>
.chanpterList {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.chanpterList li {
    position: relative;
}

.chanpterList p {

    font-size: 20px;
    margin: 10px 0;
    padding: 10px;
    height: 70px;
    line-height: 50px;
    width: 100%;
    border: 1px solid #DDD;
}

.chanpterList .acts {
    float: right;
    font-size: 14px;
}

.videoList {
    padding-left: 50px;
}

.videoList p {
    /*  float: left;  这个样式会让编辑按钮无法点击*/
    font-size: 14px;
    margin: 10px 0;
    padding: 10px;
    height: 50px;
    line-height: 30px;
    width: 100%;
    border: 1px dotted #DDD;
}
</style>
